import styled from 'styled-components'
import md5 from 'md5';
import Controller from '../../component/Controller'
import IconBackWhite from '../../asserts/back_light.svg'
import IconBg from '../../asserts/icon_bg.webp'
import { isIOS } from '../../utils/check'
import Content, { ContentRef } from './Content'
import { useTranslation } from 'react-i18next'
import { useCallback, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import { Router } from '../../router'
import Message from '../../component/Message'
import { RootState } from '../../store';
import { useSelector } from 'react-redux';
import { withdraw } from '../../service';

const Container = styled(Controller)`
    .content {
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }
    
`
const Record = styled.div`
    color: white;
    display: flex;
    font-size: .875rem;
    justify-content: end;
    align-items: center;
    height: 100%;
    padding-left: 1rem;
    box-sizing: border-box;
    margin-right: .8125rem;
`

const Box = styled.div`
    /* overflow: hidden; */
    width: 100%;
    padding: 0 .875rem 0 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
`

const Bottom = styled.div`
    display: flex;
    justify-content: center;
    padding-bottom: 2.5rem;
    box-sizing: border-box;
`

const Submit = styled.div`
    width: 92%;
    height: 2.6875rem;
    background: linear-gradient(179deg, #76EEB4, #52B47B);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.39);
    font-size: 1rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
`

const WithDraw: React.FC = () => {
    const user = useSelector((state: RootState) => state.user)
    const { t } = useTranslation()
    const navigate = useNavigate()
    const ref = useRef<ContentRef>(null)


    const onRecordClick = useCallback(() => {
        navigate(Router.Record)
    }, [navigate])

    const onSumbit = useCallback(async () => {
        const info = ref.current?.values();
        if (!info) {
            return
        }
        const address = info['address']?.trim()
        const amount = info['count']?.trim()
        const comment = info['comment'] || ''
        if (!address) {
            Message.error(t('withdraw.form.address.error'))
            return
        }

        if (!amount) {
            Message.error(t('withdraw.form.count.error'))
            return
        }

        const hash = md5((user.token || '') + address + comment + amount)

        const res = await withdraw({ address, comment, amount, hash })
        if (!res.success) {
            Message.error(res.message)
            return
        }

        Message.success(t('common.success'))
        navigate(-1)
    }, [t, user, navigate])

    return <Container
        imagebackground={{
            image: IconBg,
            style: isIOS() ? {} : { position: 'fixed' } // TODO: why absolute will case some gesture problem in andriod
        }}
        navigation={{
            title: t('withdraw.title'),
            showBack: true,
            titleStyle: {
                color: 'white'
            },
            backIcon: IconBackWhite,
            rightItem: <Record onClick={onRecordClick}>{t('withdraw.record')}</Record>
        }}
        contentClassName='content'
    >
        <Box>
            <Content ref={ref} />
            <Bottom>
                <Submit onClick={onSumbit}>{t('withdraw.submit')}</Submit>
            </Bottom>
        </Box>
    </Container>
}

export default WithDraw